<!-- 预警管理----添加规则 -->
<template>
  <bs-dialog
    :title="editorForm.id? $t('编辑规则'):$t('添加规则')"
    :visible.sync="editor"
    size="mini"
    @closed="doCloseEdit"
    class="insert-test"
  >
    <template slot="main">
      <el-form
        :inline="true"
        :model="editorForm"
        ref="editorFormRef"
        label-width="120px"
        size="small"
        label-position="right"
        :rules="editorFormRules"
        :show-message="false"
        :hide-required-asterisk="true"
        :status-icon="true"
      >
        <el-form-item :label="$t('预警规则')" prop="name">
          <el-input
            :placeholder="$t('请输入预警规则名称')"
            v-model="editorForm.name"
            autocomplete="off"
            show-word-limit
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('CPU负载')" prop="cpuLoad">
          <el-input
            v-model="editorForm.cpuLoad"
            autocomplete="off"
            :show-word-limit="false"
            maxlength="3"
            placeholder="0-100%"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('内存占用率')" prop="memLoad">
          <el-input
            v-model="editorForm.memLoad"
            autocomplete="off"
            placeholder="0-100%"
            maxlength="3"
            :show-word-limit="false"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('车辆温度')" prop="temperature">
          <el-input
            v-model="editorForm.temperature"
            autocomplete="off"
            placeholder="℃"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('分配终端组')" prop="groupId">
          <el-select-tree
              :placeholder="$t('请选择终端分组')"
              :props="props"
              :data="treeData"
              :disabled-values="disabledValues"
              v-model="editorForm.groupId"
              :check-strictly="checkStrictly"
              :default-expand-all="defaultExpandAll"
              :clearable="clearable"
          ></el-select-tree>
        </el-form-item>
      </el-form>
    </template>
    <template slot="footer">
      <bs-confirm-button-icon
        @click.native="onSubmit"
      ></bs-confirm-button-icon>
      <bs-cancel-button-icon :show-icon="false" @click.native="doCloseEdit"></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { fontItemArray } from '@/const/index.js'
// import ElSelectTree from 'el-select-tree';
export default {
  name: 'DeviceWarnDialog',
  data() {
    return {
      isAdd: true,
      isClearable: true, // 可清空（可选）
      isAccordion: true, // 可收起（可选）
      checkStrictly: true,
      clearable: true,
      defaultExpandAll: true,
      props: {
        // 配置项（必选）
        value: 'id',
        label: "name",
        owner: 'owner',
        children: 'children'
      },
      disabledValues:[],
      treeData:[],

      editor: false,
      editorForm: {},
      editorFormRef: {},
      editorFormRules: {
        name: { required: true, message: '请输入预警规则名称', trigger: 'blur' },
        cpuLoad: {
          required: true,
          message: '请输入0到100正确格式的cpu负载',
          pattern: /^(?:0|[1-9][0-9]?|100)$/,
          trigger: 'blur' },
        memLoad: {
          required: true,
          message: '请输入0到100正确格式的内存占用率',
          pattern: /^(?:0|[1-9][0-9]?|100)$/,
          trigger: 'blur',
        },
        temperature: {
          required: true,
          message: '请输入正确格式的车辆温度',
          pattern: /^[0-9]+$/,
          trigger: 'blur',
        },
        groupId: { required: true, message: '请选择终端分组', trigger: 'blur' },
      },
    }
  },
  created() {
    this.$eventBus.$on('showDeviceWarnDialog', this.show)
  },
  beforeDestroy() {
    this.$eventBus.$off('showDeviceWarnDialog')
  },
  components: {
    // ElSelectTree
  },
  directives: {
    elDragDialog,
  },
  // mounted() {
  //     this.$nextTick(function () {
  //         this.loadTreeData()
  //     })
  // },
  methods: {
    // 显示
    show(editorForm, isAdd) {
      this.editorForm = editorForm
      this.editor = true
      this.isAdd = isAdd
      this.loadTreeData()
    },
    // 关闭
    doCloseEdit: function () {
      this.$refs.editorFormRef.clearValidate()
      this.editor = false
    },

    // 加载终端分组列表
    loadTreeData() {
        let params = { 'parentId': 0 }
        this.$store.dispatch('device/doLoadTree', params).then((res) => {
            if(res) {
                this.treeData = res
                if(!this.editorForm.id)
                {
                  this.editorForm.groupId = res[0].id
                }
            }
        })
    },
    // 终端节点点击事件
    nodeClick(data, node, obj) {
      if (data) {
        this.valueId = data.id
        this.$set(this.editorForm, 'groupId', this.valueId)
      } else {
        this.valueId = ''
        this.$delete(this.editorForm, 'groupId')
      }
    },

    onSubmit() {
      this.$refs.editorFormRef.clearValidate()
      this.$refs.editorFormRef.validate(async (valid) => {
        if (valid) {
          if (this.isAdd) {
            this.$store
              .dispatch('device/doAddWarnRule', this.editorForm)
              .then((res) => {
                this.doCloseEdit()
                this.$message.success('添加成功')
                this.$emit('callback', this.isAdd)
              })
          } else {
            this.$store
              .dispatch('device/doEditWarnRule',this.editorForm)
              .then((res) => {
                this.doCloseEdit()
                this.$message.success('修改成功')
                this.$emit('callback', this.isAdd)
              })
          }
        } else {
          let index = 0
          this.$refs.editorFormRef.fields.forEach((field) => {
            if (field.validateMessage) {
              if (index === 0) {
                console.log(field.validateMessage)
                this.$message.error(field.validateMessage)
                this.validateMsg = []
              }
              index++
            }
          })
          return
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.insert-test {
  ::v-deep .el-dialog {
    width: 500px;
    height: 430px;
  }
  ::v-deep .el-dialog__body {
    margin-top: 30px;
  }
  ::v-deep .el-form-item--small .el-form-item__content {
    width: 290px;
    margin-bottom: 15px;
  }
  ::v-deep .el-select-tree {
    width: 290px;
  }
}
</style>
